<template>
  <div class="salesman-management">
    <el-card>
      <div slot="header" class="clearfix">
        <span class="page-title">
          <i class="el-icon-user-solid"></i>
          业务员管理
        </span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="loadSalesmanList">刷新数据</el-button>
      </div>

      <!-- 搜索筛选 -->
      <div class="search-section">
        <el-form :model="searchForm" :inline="true" class="search-form">
          <el-form-item label="业务员姓名">
            <el-input v-model="searchForm.name" placeholder="请输入姓名" clearable></el-input>
          </el-form-item>
          <el-form-item label="联系电话">
            <el-input v-model="searchForm.phone" placeholder="请输入手机号" clearable></el-input>
          </el-form-item>
          <el-form-item label="业务员编号">
            <el-input v-model="searchForm.salesmanNo" placeholder="请输入业务员编号" clearable></el-input>
          </el-form-item>
          <el-form-item label="所属区域">
            <el-select v-model="searchForm.regionId" placeholder="请选择区域" clearable>
              <el-option
                v-for="region in regionList"
                :key="region.id"
                :label="region.name"
                :value="region.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch" icon="el-icon-search">查询</el-button>
            <el-button @click="handleReset" icon="el-icon-refresh">重置</el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 业务员列表表格 -->
      <configurable-table
        :columns="tableColumns"
        :data="salesmanList"
        :loading="loading"
        :show-pagination="true"
        :current-page.sync="pagination.current"
        :page-size.sync="pagination.size"
        :pagination-total="pagination.total"
        @page-change="loadSalesmanList"
        border
        stripe>
        <!-- 身份证号列 -->
        <template #idNo="{ row }">
          {{ maskIdNo(row.idNo) }}
        </template>
        <!-- 业务员编号列 -->
        <template #salesmanNo="{ row }">
          <span class="salesman-no">{{ row.salesmanNo || '-' }}</span>
        </template>
        <!-- 绑定商家数列 -->
        <template #bindMerchantCount="{ row }">
          <el-tag type="info" size="small">{{ row.bindMerchantCount || 0 }}</el-tag>
        </template>
        <!-- 状态列 -->
        <template #status="{ row }">
          <el-tag :type="getStatusType(row.deleted)" size="small">
            {{ getStatusText(row.deleted) }}
          </el-tag>
        </template>
        <!-- 操作列 -->
        <template #actions="{ row }">
          <div class="action-buttons">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-view"
              @click="handleView(row)">
              查看
            </el-button>
            <el-button
              size="mini"
              type="text"
              class="delete-btn"
              icon="el-icon-delete"
              @click="handleDelete(row)">
              删除
            </el-button>
          </div>
        </template>
      </configurable-table>
    </el-card>

    <!-- 查看详情对话框 -->
    <el-dialog
      :visible.sync="detailDialogVisible"
      width="750px"
      :close-on-click-modal="false"
      custom-class="view-dialog"
    >
      <div slot="title" class="dialog-title">
        <i class="el-icon-user-solid"></i>
        <span>业务员详情</span>
      </div>

      <div class="detail-content" v-if="currentSalesman">
        <!-- 头部信息卡片 -->
        <div class="detail-header">
          <div class="avatar-section">
            <div class="avatar-circle">
              <!-- 如果有头像则显示图片，否则显示默认图标 -->
              <img
                v-if="currentSalesman.avatar"
                :src="currentSalesman.avatar"
                :alt="currentSalesman.name"
                class="avatar-img"
              />
              <i v-else class="el-icon-user-solid"></i>
            </div>
            <div class="status-badge">
              <el-tag :type="getStatusType(currentSalesman.deleted)" size="small">
                {{ getStatusText(currentSalesman.deleted) }}
              </el-tag>
            </div>
          </div>
          <div class="header-info">
            <h3 class="salesman-name">{{ currentSalesman.name }}</h3>
            <div class="salesman-no-display">
              <i class="el-icon-postcard"></i>
              <span>{{ currentSalesman.salesmanNo || '未生成编号' }}</span>
            </div>
          </div>
        </div>

        <!-- 信息分组卡片 -->
        <div class="info-sections">
          <!-- 基本信息 -->
          <div class="info-card">
            <div class="card-header">
              <i class="el-icon-user-solid"></i>
              <span>基本信息</span>
            </div>
            <div class="card-body">
              <div class="info-row">
                <div class="info-item">
                  <label><i class="el-icon-user-solid"></i> 姓名</label>
                  <span class="value">{{ currentSalesman.name }}</span>
                </div>
                <div class="info-item">
                  <label><i class="el-icon-phone"></i> 联系电话</label>
                  <span class="value">{{ currentSalesman.phone }}</span>
                </div>
              </div>
              <div class="info-row">
                <div class="info-item">
                  <label><i class="el-icon-postcard"></i> 身份证号</label>
                  <span class="value id-number">{{ maskIdNo(currentSalesman.idNo) }}</span>
                </div>
                <div class="info-item">
                  <label><i class="el-icon-message"></i> 邮箱地址</label>
                  <span class="value">{{ currentSalesman.email || '未填写' }}</span>
                </div>
              </div>
            </div>
          </div>

          <!-- 业务信息 -->
          <div class="info-card">
            <div class="card-header">
              <i class="el-icon-s-data"></i>
              <span>业务信息</span>
            </div>
            <div class="card-body">
              <div class="info-row">
                <div class="info-item">
                  <label><i class="el-icon-location"></i> 所属区域</label>
                  <span class="value">{{ currentSalesman.regionId || '未指定' }}</span>
                </div>
                <div class="info-item">
                  <label><i class="el-icon-s-shop"></i> 绑定商家数</label>
                  <span class="value">
                    <el-tag type="info" size="small" effect="plain">
                      {{ currentSalesman.bindMerchantCount || 0 }} 个
                    </el-tag>
                  </span>
                </div>
              </div>
            </div>
          </div>

          <!-- 系统信息 -->
          <div class="info-card">
            <div class="card-header">
              <i class="el-icon-time"></i>
              <span>系统信息</span>
            </div>
            <div class="card-body">
              <div class="info-row">
                <div class="info-item">
                  <label><i class="el-icon-time"></i> 创建时间</label>
                  <span class="value time">{{ currentSalesman.createTime }}</span>
                </div>
                <div class="info-item" v-if="currentSalesman.updateTime">
                  <label><i class="el-icon-refresh"></i> 更新时间</label>
                  <span class="value time">{{ currentSalesman.updateTime }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="detailDialogVisible = false" size="medium">
          <i class="el-icon-close"></i> 关闭
        </el-button>
      </div>
    </el-dialog>

    <!-- 删除确认对话框 -->
    <el-dialog
      :visible.sync="deleteDialogVisible"
      width="550px"
      :close-on-click-modal="false"
      custom-class="delete-salesman-dialog"
    >
      <div slot="title" class="delete-dialog-title">
        <div class="warning-icon-wrapper">
          <i class="el-icon-warning-outline"></i>
        </div>
        <span>删除业务员确认</span>
      </div>

      <div class="delete-content">
        <!-- 警告提示区域 -->
        <div class="warning-section">
          <div class="warning-badge">
            <i class="el-icon-warning"></i>
            <span>危险操作警告</span>
          </div>
          <div class="warning-message">
            <p class="warning-title">删除业务员将执行以下不可逆操作：</p>
            <ul class="warning-list">
              <li>
                <i class="el-icon-close-notification"></i>
                <span>永久删除业务员账号</span>
              </li>
              <li>
                <i class="el-icon-link"></i>
                <span>解除与所有商家的绑定关系</span>
              </li>
              <li>
                <i class="el-icon-coin"></i>
                <span>停止该业务员的所有分佣</span>
              </li>
              <li>
                <i class="el-icon-document-delete"></i>
                <span>删除相关业务员数据</span>
              </li>
              <li class="critical">
                <i class="el-icon-circle-close"></i>
                <span>此操作<strong>不可恢复</strong>，请谨慎操作！</span>
              </li>
            </ul>
          </div>
        </div>

        <!-- 业务员信息卡片 -->
        <div class="delete-salesman-info" v-if="currentDeleteSalesman">
          <div class="info-header">
            <i class="el-icon-user-solid"></i>
            <span>即将删除的业务员信息</span>
          </div>
          <div class="info-body">
            <div class="info-row">
              <span class="info-label">
                <i class="el-icon-user-solid-solid"></i>
                姓名
              </span>
              <span class="info-value">{{ currentDeleteSalesman.name }}</span>
            </div>
            <div class="info-row">
              <span class="info-label">
                <i class="el-icon-phone"></i>
                手机号
              </span>
              <span class="info-value">{{ currentDeleteSalesman.phone }}</span>
            </div>
            <div class="info-row">
              <span class="info-label">
                <i class="el-icon-postcard"></i>
                业务员编号
              </span>
              <span class="info-value">{{ currentDeleteSalesman.salesmanNo || '未生成' }}</span>
            </div>
            <div class="info-row">
              <span class="info-label">
                <i class="el-icon-s-shop"></i>
                绑定商家数
              </span>
              <span class="info-value highlight">{{ currentDeleteSalesman.bindMerchantCount || 0 }} 个</span>
            </div>
          </div>
        </div>

        <!-- 二次确认提示 -->
        <div class="confirm-tip">
          <i class="el-icon-info"></i>
          <span>请确认以上信息无误后，点击下方"确认删除"按钮</span>
        </div>
      </div>

      <div slot="footer" class="dialog-footer delete-dialog-footer">
        <el-button @click="deleteDialogVisible = false" size="medium">
          <i class="el-icon-close"></i>
          取消
        </el-button>
        <el-button
          type="danger"
          @click="confirmDelete"
          :loading="deleteLoading"
          size="medium"
          class="danger-delete-btn">
          <i class="el-icon-delete" v-if="!deleteLoading"></i>
          确认删除
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getSalesmanList,
  getSalesmanDetail,
  deleteSalesman,
  getRegionList
} from '@/api/aggregation'

export default {
  name: 'SalesmanManagement',
  data() {
    return {
      loading: false,
      salesmanList: [],

      // 搜索表单
      searchForm: {
        name: '',
        phone: '',
        salesmanNo: '',
        regionId: null
      },

      // 分页
      pagination: {
        current: 1,
        size: 10,
        total: 0
      },

      // 表格列配置
      tableColumns: [
        { prop: 'id', label: 'ID', minWidth: 80, align: 'center' },
        { prop: 'name', label: '业务员姓名', minWidth: 120, align: 'center' },
        { prop: 'phone', label: '联系电话', minWidth: 140, align: 'center' },
        { prop: 'idNo', label: '身份证号', minWidth: 180, align: 'center', showOverflowTooltip: true, slot: 'idNo' },
        { prop: 'salesmanNo', label: '业务员编号', minWidth: 120, align: 'center', slot: 'salesmanNo' },
        { prop: 'regionId', label: '所属区域', minWidth: 120, align: 'center' },
        { prop: 'bindMerchantCount', label: '绑定商家数', minWidth: 120, align: 'center', slot: 'bindMerchantCount' },
        { prop: 'status', label: '状态', minWidth: 100, align: 'center', slot: 'status' },
        { prop: 'createTime', label: '创建时间', minWidth: 160, align: 'center' },
        { prop: 'actions', label: '操作', minWidth: 200, align: 'center', slot: 'actions', fixed: false }
      ],

      // 区域列表
      regionList: [],

      // 详情对话框
      detailDialogVisible: false,
      currentSalesman: null,

      // 删除对话框
      deleteDialogVisible: false,
      deleteLoading: false,
      currentDeleteSalesman: null
    }
  },
  mounted() {
    this.loadSalesmanList()
    this.loadRegionList()
  },
  methods: {
    // 加载业务员列表
    async loadSalesmanList() {
      this.loading = true
      try {
        Logger.log('=== 加载业务员列表 ===')

        const params = {
          pageIndex: this.pagination.current,
          pageSize: this.pagination.size,
          ...this.searchForm
        }

        Logger.log('请求参数:', params)
        const response = await getSalesmanList(params)
        Logger.log('业务员列表API响应:', response)

        if (response.code === 0) {
          this.salesmanList = response.data.list || []
          this.pagination.total = response.data.total || 0
        } else {
          this.$message.error('加载业务员列表失败')
          this.salesmanList = []
          this.pagination.total = 0
        }
      } catch (error) {
        Logger.error('加载业务员列表失败:', error)
        this.$message.error('加载业务员列表失败')
        this.salesmanList = []
        this.pagination.total = 0
      } finally {
        this.loading = false
      }
    },

    // 加载区域列表
    async loadRegionList() {
      try {
        const response = await getRegionList()
        if (response.code === 0) {
          this.regionList = response.data?.list || response.data || []
        }
      } catch (error) {
        Logger.error('加载区域列表失败:', error)
        this.regionList = []
      }
    },

    // 搜索
    handleSearch() {
      this.pagination.current = 1
      this.loadSalesmanList()
    },

    // 重置搜索
    handleReset() {
      this.searchForm = {
        name: '',
        phone: '',
        salesmanNo: '',
        regionId: null
      }
      this.pagination.current = 1
      this.loadSalesmanList()
    },

    // 查看详情
    async handleView(row) {
      try {
        Logger.log('=== 查看业务员详情 ===')
        Logger.log('业务员ID:', row.id)

        const response = await getSalesmanDetail({id: row.id})
        Logger.log('业务员详情API响应:', response)

        if (response.code === 0) {
          this.currentSalesman = response.data
          this.detailDialogVisible = true
        } else {
          this.$message.error('获取业务员详情失败')
        }
      } catch (error) {
        Logger.error('获取业务员详情失败:', error)
        this.$message.error('获取业务员详情失败')
      }
    },

    // 删除业务员
    handleDelete(row) {
      this.currentDeleteSalesman = row
      this.deleteDialogVisible = true
    },

    // 确认删除
    async confirmDelete() {
      try {
        this.deleteLoading = true

        Logger.log('=== 删除业务员 ===')
        Logger.log('业务员ID:', this.currentDeleteSalesman.id)
        Logger.log('业务员信息:', this.currentDeleteSalesman)

        const response = await deleteSalesman({id: this.currentDeleteSalesman.id})
          Logger.log('删除业务员API响应:', response)

          if (response.code === 0) {
          this.$message.success('业务员删除成功')
          this.deleteDialogVisible = false
          this.loadSalesmanList()
          } else {
          this.$message.error(response.data?.msg || '删除失败')
          }
        } catch (error) {
          Logger.error('删除业务员失败:', error)
        this.$message.error('删除失败: ' + (error.message || '未知错误'))
      } finally {
        this.deleteLoading = false
      }
    },


    // 获取状态类型
    getStatusType(status) {
      const types = { 0: 'success', 1: 'danger' }
      return types[status] || 'info'
    },

    // 获取状态文本
    getStatusText(status) {
      const texts = { 0: '正常', 1: '已删除' }
      return texts[status] || '未知'
    },

    // 遮罩身份证号
    maskIdNo(idNo) {
      if (!idNo) return '未填写'
      if (idNo.length < 10) return idNo
      return idNo.substring(0, 6) + '****' + idNo.substring(idNo.length - 4)
    }
  }
}
</script>

<style scoped>
.salesman-management {
  padding: 20px;
}

.page-title {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
  display: flex;
  align-items: center;
}

.search-section {
  margin-bottom: 20px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 6px;
}

.search-form .el-form-item {
  margin-bottom: 0;
}

/* 操作按钮样式 */
.action-buttons {
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.action-buttons .el-button {
  margin: 0;
  padding: 4px 8px;
  font-size: 12px;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.delete-btn {
  color: #F56C6C !important;
}

.delete-btn:hover {
  background-color: #fef0f0;
  color: #F56C6C !important;
}

/* 业务员编号样式 */
.salesman-no {
  font-family: 'Courier New', monospace;
  font-weight: bold;
  color: #409eff;
  background: #f0f9ff;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
}

/* 表格样式 */
.el-table {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.el-table th {
  background: #fafafa;
  color: #303133;
  font-weight: 600;
}

.el-table td {
  padding: 12px 0;
}

.el-table .cell {
  padding: 0 12px;
}


/* ========== 详情对话框样式 ========== */
/* 对话框标题 */
.dialog-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 600;
  color: #303133;
}

.dialog-title i {
  font-size: 20px;
  color: #409eff;
}

/* 详情内容 */
.detail-content {
  padding: 0;
}

/* 头部信息区域 */
.detail-header {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 30px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 8px;
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
}

.detail-header::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -50px;
  width: 200px;
  height: 200px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
}

.detail-header::after {
  content: '';
  position: absolute;
  bottom: -50px;
  left: -50px;
  width: 150px;
  height: 150px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 50%;
}

/* 头像区域 */
.avatar-section {
  position: relative;
  z-index: 1;
}

.avatar-circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fff 0%, #f5f5f5 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border: 4px solid rgba(255, 255, 255, 0.3);
}

.avatar-circle i {
  font-size: 36px;
  color: #667eea;
}

.avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.status-badge {
  position: absolute;
  bottom: -5px;
  right: -5px;
  z-index: 2;
}

.status-badge .el-tag {
  border-radius: 12px;
  padding: 4px 10px;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* 头部信息文字 */
.header-info {
  flex: 1;
  color: white;
  z-index: 1;
}

.salesman-name {
  margin: 0 0 12px 0;
  font-size: 24px;
  font-weight: 600;
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.salesman-no-display {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  backdrop-filter: blur(10px);
  display: inline-flex;
  font-family: 'Courier New', monospace;
  font-weight: 600;
  font-size: 14px;
}

.salesman-no-display i {
  font-size: 16px;
}

/* 信息卡片区域 */
.info-sections {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.info-card {
  background: #ffffff;
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.info-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 20px;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-bottom: 1px solid #e4e7ed;
  font-weight: 600;
  font-size: 14px;
  color: #303133;
}

.card-header i {
  font-size: 16px;
  color: #409eff;
}

.card-body {
  padding: 20px;
}

/* 信息行 */
.info-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 16px;
}

.info-row:last-child {
  margin-bottom: 0;
}

/* 单个信息项 */
.info-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.info-item label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #909399;
  font-weight: 500;
}

.info-item label i {
  font-size: 14px;
  color: #c0c4cc;
}

.info-item .value {
  font-size: 14px;
  color: #303133;
  font-weight: 500;
  padding: 8px 12px;
  background: #f8f9fa;
  border-radius: 6px;
  border: 1px solid #e4e7ed;
  transition: all 0.3s ease;
}

.info-item .value:hover {
  background: #f0f2f5;
  border-color: #d4d7dc;
}

.info-item .value.id-number {
  font-family: 'Courier New', monospace;
  letter-spacing: 1px;
}

.info-item .value.time {
  font-size: 13px;
  color: #606266;
}

/* 响应式布局 */
@media (max-width: 768px) {
  .info-row {
    grid-template-columns: 1fr;
  }

  .detail-header {
    flex-direction: column;
    text-align: center;
  }

  .avatar-circle {
    width: 70px;
    height: 70px;
  }

  .avatar-circle i {
    font-size: 32px;
  }

  .salesman-name {
    font-size: 20px;
  }
}

/* 删除对话框样式 */
.delete-salesman-dialog .el-dialog__header {
  padding: 0;
  border-bottom: none;
}

.delete-dialog-title {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 24px 24px 20px 24px;
  background: linear-gradient(135deg, #f56c6c 0%, #d14343 100%);
  color: white;
  font-size: 18px;
  font-weight: 600;
}

.warning-icon-wrapper {
  width: 42px;
  height: 42px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: pulse 2s ease-in-out infinite;
}

.warning-icon-wrapper i {
  font-size: 24px;
  color: white;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 0 0 8px rgba(255, 255, 255, 0);
  }
}

.delete-content {
  padding: 24px;
}

/* 警告区域 */
.warning-section {
  background: linear-gradient(135deg, #fff3e0 0%, #ffe5cc 100%);
  border-left: 4px solid #ff9800;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(255, 152, 0, 0.1);
}

.warning-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #ff9800;
  color: white;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 12px;
  box-shadow: 0 2px 6px rgba(255, 152, 0, 0.3);
}

.warning-badge i {
  font-size: 14px;
}

.warning-message {
  color: #5d4037;
}

.warning-title {
  font-weight: 600;
  font-size: 14px;
  margin: 0 0 12px 0;
  color: #e65100;
}

.warning-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.warning-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  color: #5d4037;
  font-size: 14px;
  line-height: 1.6;
}

.warning-list li i {
  color: #ff9800;
  font-size: 16px;
  margin-top: 2px;
  flex-shrink: 0;
}

.warning-list li.critical {
  color: #d32f2f;
  font-weight: 500;
}

.warning-list li.critical i {
  color: #d32f2f;
  animation: shake 0.5s ease-in-out infinite;
}

.warning-list li.critical strong {
  color: #b71c1c;
  font-weight: 700;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-2px); }
  75% { transform: translateX(2px); }
}

/* 业务员信息卡片 */
.delete-salesman-info {
  background: #ffffff;
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.delete-salesman-info .info-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.delete-salesman-info .info-header i {
  font-size: 16px;
}

.delete-salesman-info .info-body {
  padding: 16px;
}

.delete-salesman-info .info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f0f2f5;
}

.delete-salesman-info .info-row:last-child {
  border-bottom: none;
}

.delete-salesman-info .info-label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #909399;
  font-size: 13px;
  font-weight: 500;
}

.delete-salesman-info .info-label i {
  color: #c0c4cc;
  font-size: 14px;
}

.delete-salesman-info .info-value {
  color: #303133;
  font-size: 14px;
  font-weight: 600;
}

.delete-salesman-info .info-value.highlight {
  color: #f56c6c;
  font-size: 15px;
}

/* 确认提示 */
.confirm-tip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: #e8f4fd;
  border-left: 3px solid #409eff;
  border-radius: 6px;
  font-size: 13px;
  color: #2c5aa0;
}

.confirm-tip i {
  font-size: 16px;
  color: #409eff;
  flex-shrink: 0;
}

/* 对话框底部 */
.delete-dialog-footer {
  text-align: center;
  padding: 16px 24px;
  background: #f8f9fa;
  border-top: 1px solid #e4e7ed;
}

.delete-dialog-footer .el-button {
  padding: 10px 24px;
  font-weight: 500;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.delete-dialog-footer .el-button i {
  margin-right: 4px;
}

.danger-delete-btn {
  background: linear-gradient(135deg, #f56c6c 0%, #d14343 100%);
  border: none;
  box-shadow: 0 2px 8px rgba(245, 108, 108, 0.3);
}

.danger-delete-btn:hover {
  background: linear-gradient(135deg, #d14343 0%, #b12020 100%);
  box-shadow: 0 4px 12px rgba(245, 108, 108, 0.4);
  transform: translateY(-1px);
}

.danger-delete-btn:active {
  transform: translateY(0);
}

.dialog-footer {
  text-align: center;
}

/* 卡片头部样式 */
.el-card__header {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-bottom: 1px solid #dee2e6;
  border-radius: 8px 8px 0 0;
}

.el-card__header .clearfix {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
